
<template>
  <div>
    <div class="top-panel__box">
      <el-form :model="dataForm" ref="dataForm" inline size="small" onsubmit="return false">
        <el-row>
          <el-form-item label="产品类型" label-width="80px">
            <el-select placeholder="产品类型" v-model="dataForm.productName" clearable>
              <el-option v-for="(value, key) in dicts['product_type'].childMap" :key="key" :label="value" :value="key" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row style="margin:10px 0 0 80px;">
          <el-form-item>
            <el-input placeholder="输入借款编号" v-model="dataForm.loanSerialNo" maxlength="30" clearable />
          </el-form-item>
          <el-form-item>
            <el-input placeholder="输入申请人姓名/身份证号/手机号" v-model="dataForm.freeCondition" maxlength="30" style="width:300px" clearable />
          </el-form-item>
          <el-form-item>
            <el-input placeholder="受理人" v-model="dataForm.acceptorName" maxlength="30" clearable />
          </el-form-item>
          <el-form-item prop="acceptorOrgNo">
            <organization-cascader v-model="dataForm.acceptorOrgNo" :placeholder="'请选择受理人机构'"></organization-cascader>
          </el-form-item>
          <el-form-item>
            <el-date-picker type="date" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" v-model="dataForm.beginTime" style="width:220px" placeholder="申请时间起" />
            <span>-</span>
            <el-date-picker type="date" @change="endChange" v-model="dataForm.endTime" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width:220px" placeholder="申请时间止" />
          </el-form-item>
        </el-row>
        <el-row style="margin:10px 0 0 80px;">
          <el-form-item>
            <el-button type="primary" @click="getList(1)">
              <fa-icon class="fa-search" />查询
            </el-button>
            <el-button plain type="" @click="onReset">
              <fa-icon class="fa-refresh" />重置
            </el-button>
            <!-- <reset-button :dataForm.sync="dataForm" :fixedData="{pageNum: 1, pageSize: 10, productNoList: [], loanStatus: ''}" /> -->
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <el-row class="table-top">
      <el-table :data="dataList" v-loading="tableLoading" tooltip-effect="light" class="tc-table" size="small">
        <el-table-column type="index" width="55" fixed="left" label="序号"></el-table-column>
        <template v-for="(column, index) in headList">
          <el-table-column :prop="column.prop" :label="column.label" :key="index" :width="column.width" :show-overflow-tooltip="true" />
        </template>
        <el-table-column prop="operation" class-name="oper-col" label="操作" :width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" plain @click="detailRow(scope.row)">详情</el-button>
            <el-button v-if="scope.row.loanStatus === 'FAILED'" size="mini" type="primary" plain @click="resetCert(scope.row)">重新发送</el-button>
            <!-- <el-button size="mini" type="primary" plain @click="resetCert(scope.row)">重新发送</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-row class="pagination-top">
        <pagination :pageNum.sync="dataForm.pageNum" :curSizes.sync="dataForm.pageSize" :total="total" @getList="getList" />
      </el-row>
    </el-row>
    <!--详情-->
    <el-dialog title="结清证明详情" :visible.sync="detailDialog" width="50%" :close-on-click-modal="false">
      <cert-detail v-if="detailDialog" :editData="editData" @uppdataSuccess="uppdataSuccess" @close="closeLoanDetail" />
    </el-dialog>
  </div>
</template>

<script>
import { CURRENT_STATUS, QUERY_HEAD_LIST } from './js/contant.js'
import api from './api'
import { CONSTANT_OBJ } from '@/utils/constant'
import { common } from '@/utils/common'
import CertDetail from './components/CertDetail'
import OrganizationCascader from '@/components/organizationCascader'
import { mapState } from 'vuex'
export default {
  components: { CertDetail, OrganizationCascader },
  props: { flag: String },
  data () {
    return {
      CURRENT_STATUS,
      QUERY_HEAD_LIST,
      tableLoading: false,
      detailDialog: false,
      editData: {},
      headList: [],
      dataForm: {
        freeCondition: '',
        acceptorName: '',
        loanSerialNo: '',
        acceptorOrgNo: '',
        productName: '',
        beginTime: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      dataList: [],
      slectedList: [],
      assignOverdueIds: '',
      selectedIds: []
    }
  },
  mounted () {
    this.headList = QUERY_HEAD_LIST
    this.$store.dispatch('common/queryProductData', { pageNum: 1, pageSize: 99 })
    this.getList()
  },
  methods: {
    // 查询列表
    getList (val) {
      let dateRes = this.rulesTime()
      if (!dateRes) {
        return
      }
      this.dataForm.pageNum = val || this.dataForm.pageNum
      this.tableLoading = true
      let data = {...this.dataForm}
      api.postQueryCertData(data).then(res => {
        const { responseCode, data } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.dataList = data.list || []
          this.dataList.forEach(item => {
            item.newProduct = this.dicts['product_type'].childMap[item.productName]
            item.newPeriods = this.dicts['loan_periods'].childMap[item.loanPeriods]
            item.newFeePayType = this.dicts['fee_pay_type'].childMap[item.feePayType]
            item.newSendState = this.dicts['cert_send_status'].childMap[item.sendStatus]
          })
          this.total = parseInt(data.total) || 0
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },
    uppdataSuccess () {
      this.detailDialog = false
      this.getList(1)
    },
    // 获取详情
    detailRow (row) {
      this.editData = { ...row }
      this.detailDialog = true
    },
    resetCert (row) {
      common.confirmFn(``, '是否确定重新发送结清证明？').then(res => {
        if (res) {
          api.postQueryByCaseIdLoanData(row.certId).then(res => {
            this.successFn(res)
          })
        }
      })
    },
    successFn (res, dialog) {
      const { responseCode, responseMsg: message } = res
      if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
        this.$message({
          message,
          type: 'success'
        })
        if (dialog) {
          this[dialog] = false
        }
        this.getList(1)
      }
    },
    closeLoanDetail (val) {
      this.detailDialog = val
    },
    endChange (end) {
      this.dataForm.endTime = end == null ? end : `${end} 23:59:59`
    },
    rulesTime () {
      let tempStart = this.dataForm.beginTime
      let tempEnd = this.dataForm.endTime
      let start = new Date(tempStart).getTime() || ''
      let end = new Date(tempEnd).getTime() || ''
      if (start && end) {
        if (start > end) {
          this.$message.error('结束时间不能小于开始时间')
          return false
        } else {
          return true
        }
      }
      return true
    },
    onReset () {
      let obj = {}
      for (let index in this.dataForm) {
        if (this.flag === 'A' && index === 'loanStatus') {
          obj[index] = 'FIRST_AUDIT'
        } else if (index === 'productNoList' || index === 'loanStatusList') {
          obj[index] = []
        } else {
          obj[index] = ''
        }
      }
      obj.pageNum = 1
      obj.pageSize = 10
      this.dataForm = {...obj}
    }
  },
  computed: {
    ...mapState({
      products: state => state.common.products,
      dicts: state => state.common.dicts
    })
  }
}
</script>
